<template>
  <div class="author-top-bar">
    <!-- 返回按钮 -->
    <van-icon
        name="arrow-left"
        class="back-icon"
        @click="handleBack"
    />

    <!-- 作者信息区域 -->
    <div class="author-info">
      <img
          :src="author?.avatar || defaultAvatar"
          alt="作者头像"
          class="author-avatar"
      />
      <div class="author-text">
        <div class="author-name">{{ author?.nickname || '未知用户' }}</div>
      </div>
    </div>

    <!-- 右侧关注按钮 -->
    <van-button
        class="follow-btn"
        type="primary"
        size="small"
        @click="handleFollow"
    >
      {{ isFollowed ? '已关注' : '+ 关注' }}
    </van-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref ,onMounted,watch } from "vue";
import { Icon, Button } from "vant";

// 定义组件接收的参数
const props = defineProps({
  // 作者信息对象（包含头像、昵称等）
  author: {
    type: Object,
    default: () => ({})
  },
  // 初始关注状态（可选，从父组件传入）
  isFollowed: {
    type: Boolean,
    default: false
  }
});

// 定义触发的事件
const emit = defineEmits(["back", "follow"]);

// 关注状态管理
const isFollowed = ref(props.isFollowed);

// 监听父组件传递的 isFollowed 变化，同步更新子组件的 isFollowed
watch(() => props.isFollowed, (newVal) => {
  isFollowed.value = newVal;
});

// 默认头像（当接口没有返回头像时使用）
const defaultAvatar = "https://picsum.photos/200/200?random=1";

// 处理返回按钮点击
const handleBack = () => {
  emit("back"); // 通知父组件执行返回逻辑
};

// 处理关注按钮点击
const handleFollow = () => {
  isFollowed.value = !isFollowed.value;
  emit("follow", isFollowed.value); // 通知父组件关注状态变化
};
onMounted(()=>{
  console.log("isFollowed:::"+isFollowed.value);
})
</script>

<style scoped>
.author-top-bar {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 返回按钮样式 */
.back-icon {
  font-size: 20px;
  color: #333;
  margin-right: 12px;
  cursor: pointer;
}

/* 作者信息样式 */
.author-info {
  display: flex;
  align-items: center;
  flex: 1; /* 占满剩余空间，让关注按钮靠右 */
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  border: 1px solid #f0f0f0;
}

.author-text {
  min-width: 0; /* 解决文字过长溢出问题 */
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 关注按钮样式 */
.follow-btn {
  min-width: 80px;
  height: 32px;
  font-size: 14px;
  border-radius: 16px !important;
  padding: 0 12px;
}

/* 已关注状态样式 */
.follow-btn--checked {
  background-color: #f5f5f5 !important;
  color: #666 !important;
  border-color: #e5e5e5 !important;
}
</style>
